import { View, Text } from '@tarojs/components'
import React from 'react'
import { useSelector } from 'react-redux'
import FoodCard from '../../components/FoodCard'
import './index.scss'

const Favorites = () => {
  const favorites = useSelector(state => state.food.favorites)
  const foods = [
    {
      id: '1',
      name: '香辣牛肉面',
      price: 28,
      time: '15分钟',
      type: '中式面食',
      image: 'https://images.unsplash.com/photo-1555126634-323283e090fa',
      rating: 4.5,
      ratingCount: 328,
      distance: '500m',
      tag: '午餐热门',
      isFavorite: true
    },
    {
      id: '2',
      name: '意式肉酱披萨',
      price: 58,
      time: '25分钟',
      type: '意式料理',
      image: 'https://images.unsplash.com/photo-1513104890138-7c749659a591',
      rating: 4.8,
      ratingCount: 256,
      distance: '1.2km',
      tag: '同事最爱',
      isFavorite: true
    }
  ]

  // 筛选出已收藏的食物
  const favoriteFoods = foods.filter(food => favorites.includes(food.id))

  return (
    <View className='favorites'>
      <View className='favorites__header'>
        <Text className='favorites__title'>我的收藏</Text>
        <Text className='favorites__count'>{favoriteFoods.length}个收藏</Text>
      </View>

      {favoriteFoods.length > 0 ? (
        <View className='favorites__list'>
          {favoriteFoods.map(food => (
            <FoodCard
              key={food.id}
              food={food}
              onFavorite={() => {}}
            />
          ))}
        </View>
      ) : (
        <View className='favorites__empty'>
          <Text className='fa-solid fa-heart favorites__empty-icon' />
          <Text className='favorites__empty-text'>还没有收藏任何美食</Text>
          <Text className='favorites__empty-tip'>去发现喜欢的美食吧</Text>
        </View>
      )}
    </View>
  )
}

export default Favorites 